import React, { useEffect } from "react";
import styles from "./index.module.less";
import Record from "../record";
import { connect } from "react-redux";
import { rechargeRecordAction } from "@redux/actions";

const headerTitle = [
    "充值时间",
    "订单号",
    "充值金额",
    "到账G币",
    "支付渠道",
    "支付状态",
];

const numbersOnePage = 20; // 限定一页最多存在20条数据

const RechargeRecord = (props) => {
    const { rechargeRecordAction, rec1 } = props;

    useEffect(() => {
        rechargeRecordAction(1, 1, 20);
    }, [rechargeRecordAction]);

    return (
        <div className={styles.recharge_record}>
            <Record
                headerTitle={headerTitle}
                type={1}
                rec1={rec1}
                numbersOnePage={numbersOnePage}
                totalPages={Math.ceil(
                    rec1.rechargeRecord.length / numbersOnePage
                )}
            />
        </div>
    );
};

export default connect((state) => ({ rec1: state.rechargeRecordReducer }), {
    rechargeRecordAction,
})(RechargeRecord);
